<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<style type="text/css">
			html,body,div,span,a,img,::before,::after{padding: 0;border: 0;margin: 0;outline: 0;box-sizing: border-box;}
			html,body,.Cart{height: 100%;}
			a,span{display: inline-block;}
			a{text-decoration: none;color: inherit;}
			.fl{float: left;}
			.fr{float: right;}
			.fx::after{content: "";display: block;overflow: hidden;clear: both;}
			.margin-top-15px{margin-top: 15px;}
			.Cart{display: flex;flex-direction: column;}
			.Bodyer{flex:1 1 100%;}
			.Footer{flex:0 0 100px;min-height: 100px;border-top: 1px solid #666;}
			.Navigation,.Total-Order{height: 50%;width: 100%;float: left;}
			.Navigation{display: flex;justify-content: space-around;background-color: #f5f5f5;}
			.Navigation .Button{text-align: center;}
			.Navigation .Img{height: 30px;}
			.Navigation .Img img{height: 100%;}
			.Navigation .Txt{height: 20px;line-height: 20px;font-size: 12px;}

			.Total-Order{padding: 0 10px;font-size: 12px;}
			.check,.txt-all,.txt-need-pay,.num-total-price{height: 20px;line-height:20px;}
			.check{width: 20px;border: 1px solid #666;margin-right: 6px;border-radius: 50%;}
			.check.on{background: url('./images/c_checkbox_on.png') no-repeat left 0px center / 100% 100%;}
			.num-total-price{margin-left:6px;margin-right: 6px;}
			.clac-price{height: 30px;line-height:30px;margin-top: 10px;background-color: #701C17;color: #fff;padding: 0 10px;font-size: 14px;}

			.Box{}
			.classify{display:flex;align-items: center; height: 40px;line-height:40px;padding: 0 17px;background-color: #eee;}
			.List{display:flex;height: 64px;padding: 12px 10px;border-bottom: 1px solid #ddd;background-color: #eee;}
			.List .check-box{display:flex;justify-content: center;align-items: center; flex:0 0 40px;min-width: 40px;}
			.List .Img{flex:0 0 40px;min-width: 40px;}
			.List .Img img{width: 100%;height: 100%;}
			.List .Info{flex:1 1 100%;overflow: hidden;}
			.List .Info .Title{height: 50%;line-height: 20px;text-overflow: ellipsis;white-space: nowrap;font-size: 12px;}
			.List .Info .Price-and-Count{height: 50%;line-height: 20px;}
			.jia-and-jian{height: 100%;float: right;border: 1px solid #ddd;}
			.jia-and-jian span{height: 100%;width: 20px;text-align: center;}
			.jia-and-jian .num{border-left: 1px solid #ddd;border-right: 1px solid #ddd;}

			.Current-Statistics{height: 40px;line-height: 40px;text-align: right;padding: 0 10px;}
		</style>
	</head>
	<body>
		<div class="Cart">
			<div class="Bodyer">
				<div class="Box">
					<div class="classify">
						<span class="check"></span> <!--复选框-->
						洋酒
					</div>
					<div class="List">
						<div class="check-box">
							<span class="check fl"></span>
						</div>
						<div class="Img"><img src="./images/room.png"></div>
						<div class="Info">
							<div class="Title">白酒法国酒庄红酒AOC  德国原装进口限量销售</div>
							<div class="Price-and-Count">
								<span>￥199</span>
								<div class="jia-and-jian">
									<span class="jian">-</span>
									<span class="num">0</span>
									<span class="jia">+</span>
								</div>
							</div>
						</div>
					</div>
					<div class="List">
						<div class="check-box">
							<span class="check fl"></span>
						</div>
						<div class="Img"><img src="./images/room.png"></div>
						<div class="Info">
							<div class="Title">白酒法国酒庄红酒AOC  德国原装进口限量销售</div>
							<div class="Price-and-Count">
								<span>￥199</span>
								<div class="jia-and-jian">
									<span class="jian">-</span>
									<span class="num">0</span>
									<span class="jia">+</span>
								</div>
							</div>
						</div>
					</div>
					<div class="List">
						<div class="check-box">
							<span class="check fl"></span>
						</div>
						<div class="Img"><img src="./images/room.png"></div>
						<div class="Info">
							<div class="Title">白酒法国酒庄红酒AOC  德国原装进口限量销售</div>
							<div class="Price-and-Count">
								<span>￥199</span>
								<div class="jia-and-jian">
									<span class="jian">-</span>
									<span class="num">0</span>
									<span class="jia">+</span>
								</div>
							</div>
						</div>
					</div>
					<div class="Current-Statistics">
						一共有<span class="current-count"></span>件商品:￥<span class="current-price">0.0</span>
					</div>
				</div>
				<div class="Box">
					<div class="classify">
						<span class="check"></span> <!--复选框-->
						红酒
					</div>
					<div class="List">
						<div class="check-box">
							<span class="check fl"></span>
						</div>
						<div class="Img"><img src="./images/room.png"></div>
						<div class="Info">
							<div class="Title">白酒法国酒庄红酒AOC  德国原装进口限量销售</div>
							<div class="Price-and-Count">
								<span>￥199</span>
								<div class="jia-and-jian">
									<span class="jian">-</span>
									<span class="num">0</span>
									<span class="jia">+</span>
								</div>
							</div>
						</div>
					</div>
					<div class="List">
						<div class="check-box">
							<span class="check fl"></span>
						</div>
						<div class="Img"><img src="./images/room.png"></div>
						<div class="Info">
							<div class="Title">白酒法国酒庄红酒AOC  德国原装进口限量销售</div>
							<div class="Price-and-Count">
								<span>￥199</span>
								<div class="jia-and-jian">
									<span class="jian">-</span>
									<span class="num">0</span>
									<span class="jia">+</span>
								</div>
							</div>
						</div>
					</div>
					<div class="List">
						<div class="check-box">
							<span class="check fl"></span>
						</div>
						<div class="Img"><img src="./images/room.png"></div>
						<div class="Info">
							<div class="Title">白酒法国酒庄红酒AOC  德国原装进口限量销售</div>
							<div class="Price-and-Count">
								<span>￥199</span>
								<div class="jia-and-jian">
									<span class="jian">-</span>
									<span class="num">0</span>
									<span class="jia">+</span>
								</div>
							</div>
						</div>
					</div>
					<div class="Current-Statistics">
						一共有<span class="current-count"></span>件商品:￥<span class="current-price">0.0</span>
					</div>
				</div>
			</div>
			<div class="Footer">
				<div class="Total-Order">
					<span class="check fl margin-top-15px" id="check-all"></span> <!--复选框-->
					<span class="txt-all fl margin-top-15px">全选</span>

					<span class="clac-price fr">结算</span> <!--结算价格-->
					<span class="num-total-price fr margin-top-15px">0.0</span> <!--总价-->
					<span class="txt-need-pay fr margin-top-15px">需要支付</span> <!--需要支付-->
				</div>
				<div class="Navigation">
					<div class="Button">
						<div class="Img"><img src="./images/room.png"></div>
						<div class="Txt">首页</div>
					</div>
					<div class="Button">
						<div class="Img"><img src="./images/care-1.png"></div>
						<div class="Txt">购物车</div>
					</div>
					<div class="Button">
						<div class="Img"><img src="./images/my.png"></div>
						<div class="Txt">我的</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="./jquery.min.js"></script>
		<script type="text/javascript">
			// 第一步：界面
			// 第二步：点击 check 选中
			$('.List').on('click','.check',function(){
				$(this).toggleClass('on');
				var listArray = $(this).closest('.Box').find('.List');
				var checkNum = 0;
				for(var i = 0;i < listArray.length;i++){
					if($(listArray[i]).find('.check').hasClass('on')){
						++checkNum;
					}
				}
				if(checkNum === listArray.length){
					$(this).closest('.Box').find('.classify').find('.check').addClass('on');
				}else{
					$(this).closest('.Box').find('.classify').find('.check').removeClass('on');
				}
				var classifyArray = $(this).closest('.Bodyer').find('.classify').find('.check');
				console.dir(classifyArray);
				var classifyCheckNum = 0;
				for(var i = 0;i < classifyArray.length;i++){
					if($(classifyArray[i]).hasClass('on')){
						++classifyCheckNum;
					}
				}
				if(classifyCheckNum === classifyArray.length){
					$('#check-all').addClass('on');
				}else{
					$('#check-all').removeClass('on');
				}
			})
			$('.classify').on('click','.check',function(){
				$(this).toggleClass('on');
				var classifyArray = $(this).closest('.Bodyer').find('.classify').find('.check');
				console.dir(classifyArray);
				var classifyCheckNum = 0;
				for(var i = 0;i < classifyArray.length;i++){
					if($(classifyArray[i]).hasClass('on')){
						++classifyCheckNum;
					}
				}
				if(classifyCheckNum === classifyArray.length){
					$('#check-all').addClass('on');
				}else{
					$('#check-all').removeClass('on');
				}
				if($(this).hasClass('on')){
					$(this).closest('.Box').find('.List').find('.check').addClass('on');
				}else{
					$(this).closest('.Box').find('.List').find('.check').removeClass('on');
				}
			})
			$('#check-all').on('click',function(){
				$(this).toggleClass('on');
				if($(this).hasClass('on')){
					$('.Box').find('.check').addClass('on');
				}else{
					$('.Box').find('.check').removeClass('on');
				}
			})
		</script>
	</body>
</html>